<template>
  <div class="progress-tracking">
    <!-- 时间范围选择器 -->
    <div class="time-range">
      <el-date-picker
          v-model="timeRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="updateChart"
      />
    </div>

    <!-- 甘特图 -->
    <div class="gantt-chart">
      <h3>任务进度</h3>
      <div ref="ganttChart" style="width: 100%; height: 300px;"></div>
    </div>

    <!-- 任务状态统计 -->
    <div class="task-status">
      <h3>任务状态</h3>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card>
            <div class="metric">
              <div class="label">进行中</div>
              <div class="value">{{ taskStatus.inProgress }}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <div class="metric">
              <div class="label">已完成</div>
              <div class="value">{{ taskStatus.completed }}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <div class="metric">
              <div class="label">未开始</div>
              <div class="value">{{ taskStatus.notStarted }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 里程碑列表 -->
    <div class="milestones">
      <h3>里程碑</h3>
      <el-timeline>
        <el-timeline-item
            v-for="milestone in milestones"
            :key="milestone.date"
            :timestamp="milestone.date"
        >
          {{ milestone.description }}
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

// 时间范围
const timeRange = ref([new Date('2023-10-01'), new Date('2023-10-31')]);

// 任务状态
const taskStatus = ref({
  inProgress: 10,
  completed: 5,
  notStarted: 5,
});

// 里程碑
const milestones = ref([
  { date: '2023-10-10', description: '需求评审完成' },
  { date: '2023-10-20', description: '开发完成' },
  { date: '2023-10-31', description: '项目上线' },
]);

// 甘特图
const ganttChart = ref(null);
let chartInstance = null;

// 初始化甘特图
const initChart = () => {
  chartInstance = echarts.init(ganttChart.value);
  updateChart();
};

// 更新甘特图
const updateChart = () => {
  const option = {
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'time' },
    yAxis: { data: ['任务1', '任务2', '任务3'] },
    series: [
      {
        type: 'bar',
        data: [
          { name: '任务1', value: [new Date('2023-10-01'), new Date('2023-10-10')] },
          { name: '任务2', value: [new Date('2023-10-05'), new Date('2023-10-15')] },
          { name: '任务3', value: [new Date('2023-10-10'), new Date('2023-10-20')] },
        ],
      },
    ],
  };
  chartInstance.setOption(option);
};

// 组件挂载时初始化图表
onMounted(() => {
  initChart();
});
</script>

<style scoped>
.progress-tracking {
  padding: 20px;
}

.time-range {
  margin-bottom: 20px;
}

.gantt-chart,
.task-status,
.milestones {
  margin-top: 30px;
}

.metric {
  text-align: center;
}

.metric .label {
  font-size: 14px;
  color: #666;
}

.metric .value {
  font-size: 24px;
  font-weight: bold;
  margin-top: 10px;
}
</style>